@import "../_config.scss";

.designers-show{
  background-color: $color-default;

  .introduction{
    padding: 0 20px;
  }

  .introduction-panel{
    padding-top: 25px;
    padding-bottom: 25px;

    border: 1px solid $color-border;
    border-left-width: 2px;
    border-right-width: 2px;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-top-style: dotted;
    border-bottom-style: dashed;

    .designer-head{
      img{
        width: 100%;
        min-height: 250px;
        box-shadow: 10px 10px #656262;
      }
      .contact-btn{
        &, &:hover, &:focus, &:active{
          border: 0;
          background-color: $color-private;
          color: #fff;
          font-size: 15px;
          padding: 5px 10px;
          position: absolute;
          left: 35%;
          bottom: -20px;
        }
      }
    }

    .designer-info{
      padding-left: 40px;
      h1{
        font-size: 24px;
        color: #484848;
      }
      h5{
        font-size: 14px;
      }
      .post{
        font-size: 15px;
      }
      .info{
        font-size: 14px;
        color: #666666;
      }
      .renzheng{
        margin-top: 20px;
      }
    }
  }

  .works{
    .work{
      margin-bottom: 30px;
      img{
        width: 100%;
        height: 240px;
        cursor: pointer;

        &:hover{
            opacity: 0.8;
        }
      }

      .work-info{
        padding: 15px 0;
        background-color: #F6F7FC;

        h1{
          margin-top: 0;
          font-size: 16px;
          color: #222222;
          cursor: pointer;

          &:hover{
              color: $color-private;
          }
        }
        hr{
          width: 100px;
          margin: 0 auto;
          margin-bottom: 15px;
        }
      }
    }
  }
}


.designers-show-mobile{
  min-height: 100%;
  background-color: #e5e5e5;
  padding-top: 10px;
  padding-top: 2.66vw;

  .designer{
    background-color: $color-default;
    padding: 15px 15px 30px 15px;
    padding: 4vw 4vw 8vw 4vw;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    .avatar{
      position: relative;
      width: 130px;
      height: 130px;
      width: 35vw;
      height: 35vw;
      img{
        width: 100%;
        height: 100%;
        box-shadow: 5px 5px #626262;
      }

      .contact-btn{
        border: 0;
        background-color: $color-private;
        color: #fff;
        font-size: 15px;
        font-size: 4vw;
        padding: 5px 10px;
        padding: 1.33vw 2.66vw;
        position: absolute;
        left: 20%;
        bottom: -15%;
      }
    }

    .info{
      width: 213px;
      width: 57vw;
      padding-left: 20px;
      padding-left: 5.33vw;

      h1,h2,p{
        margin: 0;
      }
      h1{
        font-size: 18px;
        font-size: 4.8vw;
        color: #222222;
        small{
          color: #999999;
        }
      }
      h2{
        margin-top: 10px;
        margin-top: 2.66vw;
        font-size: 16px;
        font-size: 4.3vw;
        color: $color-private;
      }
      p{
        font-size: 15px;
        font-size: 4vw;
        color: #999999;
      }
      hr{
            border-style: dashed;
            margin-top: 10px;
            margin-top: 2.66vw;
            margin-bottom: 2.66vw;
            margin-bottom: 10px;
      }
    }
  }

  .list{
    margin-top: 10px;
    margin-top: 2.66vw;
    padding: 15px 10px  15px 15px;
    padding: 4vw 2.66vw  4vw 4vw;
    background-color: #fff;
    display: flex;
    flex-flow: row wrap;

    .item{
        width: 170px;
        width: 45.33vw;
        margin-right: 5px;
        margin-right: 1.33vw;
        margin-bottom: 10px;
        margin-bottom: 2.66vw;

        img{
            width: 100%;
            height: 120px;
            height: 32vw;
        }

        .infos{
          padding-bottom: 10px;
          padding-bottom: 2.66vw;
          background-color: #f6f7fc;

          >h1{
              margin: 0;
              padding-top: 20px;
              padding-bottom: 10px;
              padding-top: 5.33vw;
              padding-bottom: 2.66vw;
              font-size: 15px;
              font-size: 4vw;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: block-axis;
              height: 40px;
              line-height: 20px;
              color: #222222;
          }

          .item-list{
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            h1{
              margin: 0;
              font-size: 15px;
              font-size: 4vw;
              color: #222222;
            }
            span{
              font-size: 12px;
              font-size: 3.2vw;
              color: #999999;
            }
          }
        }
    }
  }
}
